<template>
  <div class="login df jc ai">
    <div class="login-box df">
      <div class="left li df jc ai">
        <img src="@/assets/images/login3.png" class="loginlogo">
      </div>
      <div class="right li df fdc bs">
        <h3>用户登录</h3>
        <label for="username" class="df jc ai">
          <img src="@/assets/images/login1.png" alt="">
          <input type="text" id="username" placeholder="请输入用户名" v-model="username">
        </label>
        <label for="password" class="df jc ai">
          <img src="@/assets/images/login2.png" alt="">
          <input type="password" id="password" placeholder="请输入密码" v-model="password">
        </label>
        <div class="remember df jc ai" for="remember">
          <span class="checkbox cp us" @click="remReverse">{{rem?'✓':''}}</span>
          <span class="f16 rem cp us" @click="remReverse">记住密码</span>
        </div>
        <button class="login-btn cp" @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script src="./login.js">
</script>

<style lang="scss" scoped>
.login{
  height: 100vh;
  background: url('../..//assets/images/loginBGI.png') no-repeat center center;
  background-size: 100% 100%;
  .login-box{
    width: 800px;
    height: 394px;
    background: rgba(255, 255, 255, .5);
    border-radius: 10px;
    .loginlogo{
      width: 165px;
    }
    .li{
      width: 50%;
    }
    .right{
      padding: 30px 50px;
      h3{
        font-size: 30px;
        font-weight: 600;
      }
      label{
        background-color: #fff;
        height: 40px;
        border-radius: 10px;
        margin-top: 30px;
        img{
          width: 20px;
          height: 20px;
          padding: 0 24px;
        }
        input{
          flex: 1;
          border-left: 1px solid #dcdcdc;
          height: 28px;
          padding-left: 30px;
          width: 170px;
          font-size: 20px;
        }
      }
      .remember{
        line-height: 60px;
        input{
          width: 25px;
          height: 25px;
          background-color: white;
          color: red;
          border: 1px solid #ccc;
          display: inline-block;
        }
        .checkbox{
          display: inline-block;
          width: 21px;
          height: 21px;
          content: "\2713";
          color: #e90013;
          font-size: 20px;
          font-weight: 600;
          text-align: center;
          line-height: 17px;
          background: #fff;
          padding-top: 2px;
          box-sizing: border-box;
        }
        .rem{
          color: #333;
          margin-left: 20px;
        }
      }
      .login-btn{
        border-radius: 5px;
        line-height: 50px;
        font-size: 20px;
        color: #fff;
        background: #e90013;
      }
    }
  }
}
</style>
